<template>
  <footer>
    <div class="foot-container">
      <div v-for="(item, index) in footList" :key="index" class="foot-left">
        <h2>{{ item.title }}</h2>
        <ul>
          <li v-for="(sub_item, index) in item.subList" :key="index">
            <router-link :to="sub_item.link">{{
              sub_item.sub_title
            }}</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <div>DXCORP AI平台 版权所有 ©2019-2020</div>
    </div>
  </footer>
</template>
 
<script>
export default {
  name: "Footer",
  data() {
    return {
      footList: [
        {
          title: "关于我们",
          subList: [
            {
              sub_title: "隐私政策",
              link: "",
            },
            {
              sub_title: "服务协议",
              link: "",
            },
          ],
        },
        {
          title: "技能开发平台",
          subList: [
            {
              sub_title: "文档中心",
              link: "",
            },
            {
              sub_title: "常见问题",
              link: "",
            },
          ],
        },
        {
          title: "开发支持",
          subList: [
            {
              sub_title: "视觉API索引",
              link: "",
            },
            {
              sub_title: "SDK",
              link: "",
            },
          ],
        },
        {
          title: "联系我们",
          subList: [
            {
              sub_title: "视觉API索引",
              link: "",
            },
            {
              sub_title: "SDK",
              link: "",
            },
          ],
        },
      ],
    };
  },
};
</script>
 
<style lang="scss" scoped>
footer {
  width: 100%;
//   height: 288px;
  .foot-container {
    z-index: 666;
    background: #222222;
    width: 100%;
    padding: 3% 7%;
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* 水平居中 */
    h2 {
      color: #fff;
      margin: 0 0 20px 0;
      font-size: 16px;
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    ul {
      li {
        padding: 5px;
        padding-left: 0;
        padding-right: 0;
        color: #969595;
        font-size: 14px;
      }
    }
    .foot-left {
      margin-right: 5%;
      ul {
        li {
          padding: 10px;
          border-top: 1px solid #3f3f3f;
          a {
            display: block;
            color: #969595;
            font-size: 10px;
            text-decoration: none;
            transition: all 0.3s;
            &:hover {
              color: #006e2f;
              transform: scale(1.2);
            }
          }
        }
      }
    }
    .foot-middle {
      margin-left: 3%;
      position: relative;
      text-align: left;
      &::before {
        position: absolute;
        content: "";
        height: 80%;
        width: 1px;
        background-color: #3f3f3f;
        left: -30px;
        top: 10%;
      }
      ul > li > i {
        margin-right: 8px;
      }
    }
    .foot-right {
      text-align: left;
      margin-left: 5%;
      ul {
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: repeat(2, 42%);
        gap: 3px;
        li:hover {
          animation: pulse 0.5s linear;
        }
      }
      h5 {
        text-align: right;
        a {
          color: #5fb878;
          text-decoration: none;
        }
      }
    }
  }
  .foot-bottom {
    background: #181818;
    padding: 15px 0;
    box-sizing: border-box;
    width: 100%;
    color: #999999;
    font-size: 14px;
    display: flex;
    justify-content: space-around;
  }
}
</style>

